<template>
	<div>
		<el-dialog
			title="添加角色"
			:visible.sync="addRoleVisible"
			width="50%"
			:before-close="handleClose"
			@close="addDialdgClose"
		>
			<!-- 内容区域 -->
			<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px">
				<el-form-item label="编号" prop="RoleCode">
					<el-input v-model="addForm.RoleCode"></el-input>
				</el-form-item>
				<el-form-item label="角色名称" prop="RoleName">
					<el-input v-model="addForm.RoleName"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="Remark">
					<el-input v-model="addForm.Remark"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addRoleVisible = false">取 消</el-button>
				<el-button type="primary" @click="addRole">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		addRoleVisible: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			addForm: {
				RoleCode: '',
				RoleName: '',
				Remark: ''
			},
			//添加表单数据验证
			addFormRules: {
				RoleCode: [
					{ required: true, message: '请输入编号', trigger: 'blur' },
					{
						min: 3,
						max: 11,
						message: '长度在3到11个字符之间',
						trigger: 'blur'
					}
				],
				RoleName: [
					{
						required: true,
						message: '请输入角色名称',
						trigger: 'blur'
					}
				]
			}
		}
	},
	methods: {
		handleClose(done) {
			this.$confirm('确认关闭？')
				.then(_ => {
					done()
				})
				.catch(_ => {})
		},
		//初始化弹框
		addDialdgClose() {
			this.$refs.addFormRef.resetFields()
		},
		//添加角色
		addRole() {
			console.log('添加角色')

			this.$refs.addFormRef.validate(valid => {
				if (!valid) {
					return
				}
				console.log(this.addForm)
				this.$get('/api/Role/AddRole', this.addForm)
					.then(res => {
						if (res.code == 0) {
							this.$alert(res.msg, '提示')
							this.addRoleVisible = false
							this.$emit('refreshData')
						} else {
							this.$alert(res.msg, '提示')
						}
					})
					.catch(err => {
						console.log(err)
					})
			})
		}
	},
	watch: {
		addRoleVisible: function(val) {
			this.$emit('IsShowAdd', val)
		}
	}
}
</script>